<!--
 描述: 右下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">村级类别统计分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_polo_cun_one"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "waterPolocunone",
        data() {
            return {
                baseUrl: domain.testUrl,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');

                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findOrganizationByNation?name="+ this.baseName;
                var datalist = [];
                axios.post(url).then((response) => {
                    response.data.forEach((res) => {
                        datalist.push({
                            value: res.y,
                            name: res.x
                        });
                    })
                    let myChart = echarts.init(document.getElementById('chart_polo_cun_one'));




                    var scaleData = [{
                        'name': '工程建设',
                        'value': 10
                    },
                        {
                            'name': '产权交易',
                            'value': 10
                        },
                        {
                            'name': '土地交易',
                            'value': 10
                        },
                        {
                            'name': '其他交易',
                            'value': 10
                        },
                        {
                            'name': '土地交易',
                            'value': 10
                        },
                        {
                            'name': '其他交易',
                            'value': 10
                        },

                    ];
                    var rich = {
                        white: {
                            color: '#fff',
                            align: 'center',
                            fontWeight:'bold',
                            padding: [3, 0]
                        }
                    };
                    var placeHolderStyle = {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    };
                    var data = [];
                    var color1 = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)','rgb(255,222,0)','rgb(255,0,0)'];

                    for (var i = 0; i < scaleData.length; i++) {
                        data.push({
                            value: scaleData[i].value,
                            name: scaleData[i].name,
                            itemStyle: {
                                normal: {
                                    borderWidth: 4,
                                    shadowBlur: 30,
                                    borderColor:color1[i],
                                    shadowColor: color1[i],
                                    color: color1[i],
                                    opacity:0.75,
                                }
                            }
                        }, {
                            value: 2,
                            name: '',
                            itemStyle: placeHolderStyle
                        });
                    }
                    var seriesObj = [{
                        name: '',
                        type: 'pie',
                        clockWise: false,
                        radius: [65, 125],
                        hoverAnimation: false,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inner',
                                    fontWeight:'bold',
                                    formatter: function(params) {
                                        var percent = 0;
                                        var total = 0;
                                        for (var i = 0; i < scaleData.length; i++) {
                                            total += scaleData[i].value;
                                        }
                                        percent = ((params.value / total) * 100).toFixed(0);
                                        if(params.name !== '') {
                                            return params.name + '\n{white|' + '占比' + percent + '%}';
                                        }else {
                                            return '';
                                        }
                                    },
                                    rich: rich
                                },
                                labelLine: {
                                    show: false,
                                }
                            }
                        },
                        data: data
                    }];
                    let option = {
                        // backgroundColor: '#04243E',
                        tooltip: {
                            show: false
                        },
                        legend: {
                            show: false
                        },
                        toolbox: {
                            show: false
                        },
                        series: seriesObj
                    }



                    myChart.setOption(option, true);
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });


                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
    };
</script>
<style lang="scss" scoped>
    .sn-container {
        left: 1400px;
        top: 40px;
        width: 480px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>